<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>entry和output模块说明</title>
  <!-- 
  在 Webpack 中， `entry`  和  `output`  是两个非常重要的配置项，它们定义了打包的入口和输出。
  1. Entry（入口）
  `entry`  指定了 Webpack 打包的入口文件。Webpack 从这个文件开始构建依赖图，分析文件之间的关系，并将所有依赖的模块打包在一起。
  - 基本用法：
  module.exports = {
      entry: './src/index.js',
    };
  上面的配置表示 Webpack 从  `src/index.js`  文件开始进行打包。

  - 多入口：可以指定多个入口文件，适用于需要生成多个输出文件的情况。
  module.exports = {
      entry: {
        app: './src/app.js',
        vendor: './src/vendor.js',
      },
    };
  上面的配置会生成两个入口，分别打包  `app`  和  `vendor` 。

  2. Output（输出）
  `output`  用于配置 Webpack 打包后的输出文件的相关信息，包括输出路径、文件名等。
  - 基本用法：
  module.exports = {
      output: {
        filename: 'bundle.js',
        path: __dirname + '/dist',
      },
    };
  上面的配置表示打包后的文件名为  `bundle.js` ，并输出到项目根目录下的  `dist`  文件夹。

  - 动态文件名：可以使用占位符来动态生成文件名，例如根据入口名称生成不同的输出文件。
  module.exports = {
      output: {
        filename: '[name].bundle.js',
        path: __dirname + '/dist',
      },
    };
  在这个例子中，输出的文件名会根据入口的名称而变化。

  总结
  -  `entry`  用于指定打包的入口文件，决定了依赖图的起点。
  -  `output`  用于配置打包后的输出文件，包括文件名和输出路径。
  这两个配置项是 Webpack 的核心部分，正确配置它们可以有效地管理和优化前端资源的打包过程。
  -->
</head>
<body>
  
</body>
</html>